import { defineComponent } from 'vue';
import GLayout from '/@/shared/components/g-layout/index.vue';
import printJS from 'print-js';
export default defineComponent({
  /**
   * 页面打印示例
   *
   * npm address: https://www.npmjs.com/package/print-js
   */
  components: { GLayout },
  data() {
    return {
      columns: [
        {
          title: '参数',
          dataIndex: 'param',
          key: 'param',
          width: 200,
        },
        {
          title: '默认值',
          dataIndex: 'defaultValue',
          key: 'defaultValue',
          width: 200,
        },
        {
          title: '说明',
          dataIndex: 'instructions',
          key: 'instructions',
        },
      ],
      dataSource: [] as any[],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.dataSource = [
        {
          param: 'printable',
          defaultValue: 'null',
          instructions: '文档来源：pdf或图像的url，html元素的id或json数据的对象',
        },
        {
          param: 'type',
          defaultValue: 'PDF',
          instructions: '可打印类型。可用的打印选项包括：pdf，html，image，json和raw-html。',
        },
        {
          param: 'header',
          defaultValue: 'null',
          instructions:
            '用于HTML，Image或JSON打印的可选标头。它将放在页面顶部。此属性将接受文本或原始HTML',
        },
        {
          param: 'headerStyle',
          defaultValue: "'font-weight：300;'",
          instructions: '要应用于标题文本的可选标题样式',
        },
        {
          param: 'maxWidth',
          defaultValue: '800',
          instructions: '最大文档宽度（像素）。根据需要更改此项。在打印HTML，图像或JSON时使用。',
        },
        {
          param: 'css',
          defaultValue: 'null',
          instructions:
            '这允许我们传递一个或多个应该应用于正在打印的html的css文件URL。值可以是包含单个URL的字符串，也可以是包含多个URL的数组。',
        },
        {
          param: 'style',
          defaultValue: 'null',
          instructions:
            '设置为false时，库不会处理应用于正在打印的html的样式。使用css参数时很有用。',
        },
        {
          param: 'scanStyles',
          defaultValue: 'true',
          instructions: '要应用于标题文本的可选标题样式',
        },
        {
          param: 'targetStyle',
          defaultValue: 'true',
          instructions:
            "默认情况下，在打印HTML元素时，库仅处理某些样式。此选项允许您传递要处理的样式数组。例如：['padding-top'，'border-bottom']",
        },
        {
          param: 'targetStyles',
          defaultValue: 'true',
          instructions:
            "与targetStyle相同，这将处理任何一系列样式。例如：['border'，'padding']，将包括'border-bottom'，'border-top'，'border-left'，'border-right'，'padding-top'等。你也可以传递['*']来处理所有样式",
        },
        {
          param: 'ignoreElements',
          defaultValue: '[]',
          instructions: '接受打印父html元素时应忽略的html的id数组',
        },
        {
          param: 'properties',
          defaultValue: 'null',
          instructions: '在打印JSON时使用。这些是对象属性名称。',
        },
        {
          param: 'gridHeaderStyle',
          defaultValue: "'font-weight：bold;'",
          instructions: '打印JSON数据时网格标题的可选样式。',
        },
        {
          param: 'gridStyle',
          defaultValue: "'border: 1px solid lightgray; margin-bottom: -1px;'",
          instructions: '打印JSON数据时网格行的可选样式',
        },
        {
          param: 'repeatTableHeader',
          defaultValue: 'true',
          instructions: '在打印JSON数据时使用。设置为时false，数据表标题仅显示在第一页中。',
        },
        {
          param: 'showModal',
          defaultValue: 'null',
          instructions: '启用此选项可在检索或处理大型PDF文件时显示用户反馈',
        },
        {
          param: 'modalMessage',
          defaultValue: 'Retrieving Document...',
          instructions: '当向用户显示的消息showModal被设定为true。',
        },
        {
          param: 'onLoadingStart',
          defaultValue: 'null',
          instructions: '加载PDF时要执行的功能',
        },
        {
          param: 'onLoadingEnd',
          defaultValue: 'null',
          instructions: '加载PDF后要执行的功能',
        },
        {
          param: 'documentTitle',
          defaultValue: 'Document',
          instructions:
            '打印html，image或json时，它将显示为文档标题。如果用户尝试将打印作业保存为pdf文件，它也将是文档的名称。',
        },
        {
          param: 'properties',
          defaultValue: 'null',
          instructions: '在打印JSON时使用。这些是对象属性名称。',
        },
      ];
      this.dataSource = this.dataSource.map((item, index) => {
        item['key'] = index;
        return item;
      });
    },
    /**
     * 打印
     */
    handlePrintClick() {
      printJS({
        printable: 'page-to-print',
        type: 'html',
        css: ['print-style/print.css'],
      });
    },
  },
});
